import React, {Component} from 'react';
import {
    Image,
    StyleSheet,
} from 'react-native';

import {Navigator} from "react-native-deprecated-custom-components";
import TabNavigator from 'react-native-tab-navigator';

import Course from './course/course'
import Activity from './activity/activity'
import Circle from './circle/circle'
import Resource from './resource/resource'
import Expert from './expert/expert'
import '../color/Color'
import colors from "./color/Color";

let username;
export default class Main extends Component {

    render() {
        username=this.props.name;
        var rootRoute = {
            component: third,
            passProps:{
                name:username
            }
        };
        return (
            <Navigator
                initialRoute={rootRoute}
                configureScene={(route) => {
                    return Navigator.SceneConfigs.PushFromRight //从右向左
                }}
                renderScene={(route, navigator) => {
                    // 从route对象中获取页面组件
                    var Minuit = route.component;
                    return (<Minuit navigator={navigator} {...route.passProps}/>);
                }}
            ></Navigator>
        );

    }
}

//主视图 包含Drawer,Navigation,Fragment
class third extends Component {
    constructor() {
        super();
        this.state = {
            selectedTab: 'course',
            name:username,
        }
    }

    render() {

        return (
            <TabNavigator style={{marginBottom: 3}}>
                {/*课题*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'course'}
                    title="课题"
                    selectedTitleStyle={styles.tabTiTle}
                    renderIcon={() => <Image style={styles.tabImg} source={require('./img/icon_keti.png')}/>}
                    renderSelectedIcon={() => <Image style={styles.tabImg} source={require('./img/icon_keti_c.png')}/>}
                    onPress={() => this.setState({selectedTab: 'course'})}>
                        <Course name={this.state.name}/>
                </TabNavigator.Item>

                {/*活动*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'activity'}
                    title="活动"
                    selectedTitleStyle={styles.tabTiTle}
                    renderIcon={() => <Image style={styles.tabImg} source={require('./img/icon_activity.png')}/>}
                    renderSelectedIcon={() => <Image style={styles.tabImg}
                                                     source={require('./img/icon_activity_c.png')}/>}
                    onPress={() => this.setState({selectedTab: 'activity'})}>
                    <Activity/>
                </TabNavigator.Item>

                {/*圈子*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'circle'}
                    title="圈子"
                    selectedTitleStyle={styles.tabTiTle}
                    renderIcon={() => <Image style={styles.tabImg} source={require('./img/icon_circle.png')}/>}
                    renderSelectedIcon={() => <Image style={styles.tabImg}
                                                     source={require('./img/icon_circle_c.png')}/>}
                    onPress={() => this.setState({selectedTab: 'circle'})}>
                    <Circle/>
                </TabNavigator.Item>

                {/*资源*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'resource'}
                    title="资源"
                    selectedTitleStyle={styles.tabTiTle}
                    renderIcon={() => <Image style={styles.tabImg} source={require('./img/icon_resource.png')}/>}
                    renderSelectedIcon={() => <Image style={styles.tabImg}
                                                     source={require('./img/icon_resource_c.png')}/>}
                    onPress={() => this.setState({selectedTab: 'resource'})}>
                    <Resource/>
                </TabNavigator.Item>

                {/*专家*/}
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'expert'}
                    title="专家"
                    selectedTitleStyle={styles.tabTiTle}
                    renderIcon={() => <Image style={styles.tabImg} source={require('./img/icon_expert.png')}/>}
                    renderSelectedIcon={() => <Image style={styles.tabImg}
                                                     source={require('./img/icon_expert_c.png')}/>}
                    onPress={() => this.setState({selectedTab: 'expert'})}>
                    <Expert/>
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
}

const styles = StyleSheet.create({
    drawer_head: {
        flex: 1,
        backgroundColor: '#4ebcab'
    },
    tab: {
        height: 20,
        backgroundColor: '#333333',
    },
    main: {
        flex: 1,
        justifyContent: 'center',
    },
    tabImg: {
        width: 20,
        height: 20,
        resizeMode: Image.resizeMode.contain,
    },
    tabTiTle: {
        color: colors.colorPrimary
    }
});